<template>
  <div class="fold-panel">
    <div class="left-panel" :style="{width: leftPanelWidth + 'px'}">
      <button @click="toggleLeftPanel">Toggle Left Panel</button>
      <div v-show="showLeftPanel">
        <!-- 左侧面板内容 -->
      </div>
    </div>
    <div class="right-panel" :style="{width: rightPanelWidth + 'px'}">
      <button @click="toggleRightPanel">Toggle Right Panel</button>
      <div v-show="showRightPanel">
        <!-- 右侧面板内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showLeftPanel: true,
      showRightPanel: true,
      leftPanelWidth: 200,
      rightPanelWidth: 200
    }
  },
  methods: {
    toggleLeftPanel() {
      this.showLeftPanel = !this.showLeftPanel
      this.leftPanelWidth = this.showLeftPanel ? 200 : 0
    },
    toggleRightPanel() {
      this.showRightPanel = !this.showRightPanel
      this.rightPanelWidth = this.showRightPanel ? 200 : 0
    }
  }
}
</script>

<style>
.fold-panel {
  display: flex;
  height: 100%;
}

.left-panel, .right-panel {
  transition: width 0.3s;
  overflow: hidden;
}

.left-panel {
  background-color: #eee;
}

.right-panel {
  background-color: #ccc;
}
</style>
